<template>
  <div class="tabbar">
    <ul>
      <router-link
        to="/home"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <TabBarLink :isActive="isActive" @click.native="navigate">
          <span class="iconfont icon-shouye1"></span>
          <span>首页</span>
        </TabBarLink>
      </router-link>
      <router-link
        to="/classify"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <TabBarLink :isActive="isActive" @click.native="navigate">
          <span class="iconfont icon-xianxingtubiaozhizuomoban-36"></span>
          <span>分类</span>
        </TabBarLink>
      </router-link>
      <router-link
        to="/discovery"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <TabBarLink :isActive="isActive" @click.native="navigate">
          <span class="iconfont icon-faxian"></span>
          <span>发现</span>
        </TabBarLink>
      </router-link>
      <router-link
        to="/shoppingcar"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <TabBarLink :isActive="isActive" @click.native="navigate">
          <span class="iconfont icon-icon-"></span>
          <span>购物袋</span>
        </TabBarLink>
      </router-link>
      <router-link
        to="/mine"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <TabBarLink :isActive="isActive" @click.native="navigate">
          <span class="iconfont icon-wode"></span>
          <span>我</span>
        </TabBarLink>
      </router-link>
    </ul>
  </div>
</template>

<script>
import TabBarLink from "../../components/TabBarLink";
export default {
  components: {
    TabBarLink,
  },
  data() {
    return {
      // currrntIndex: 1,
    };
  },
  //计算属性 依赖缓存,多对一(即多个影响一个),不支持异步
  computed: {},
  //监控data中的数据变化,不依赖缓存,一对多,支持异步
  watch: {},
  //方法集合
  methods: {
    tabbarHandler(index) {
      // this.currrntIndex = index;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='stylus' scoped>
@import '../../assets/border.styl';
@import '../../assets/iconfonts/iconfont.css';

.tabbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1;
  background-color: #fff;

  ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 0.5rem;
    border_1px(1px 0 0 0); 
    li {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 0.05rem;

      span {
        font-size: 0.2rem;
        font-weight: 700;
        color: #959595;
        line-height: 0.2rem;
      }

      span:last-child {
        font-size: 0.12rem;
        font-weight: 600;
      }
    }
  }
}
</style>